<include file="Public/head" />
<script type="text/javascript" src="/static/js/premage.js"></script>
<style type="text/css">
    .focus-btn{width:80px;border-radius: 3px;color: #fff;margin-left: 7px;padding: 0;background-color: #20ab4f;border: medium none;}
    .carousel table tr td{height:40px;line-height:40px;text-align:left;}
    .carousel_sub{}
    .carousel_sub input{ background: #20ab4f none repeat scroll 0 0; border: 1px solid #20ab4f;border-radius: 3px;color: #fff;cursor: pointer;
                         font-size: 14px;height: 30px;line-height: 30px;margin: 30px 10px;text-align: center;width: 170px;}
    .genghua {background-color: #20ab4f; border: medium none;border-radius: 4px;color: #fff;cursor: pointer; display: inline-block;
              height: 30px; line-height: 30px;width: 100px;margin-top:-55px; float:left;}
    .shangChuan { cursor: pointer;height: 30px; opacity: 0; width: 100px;margin-top:25px;float:left;}
    .shangChuan1 { cursor: pointer;height: 30px; opacity: 0; width: 100px;margin-top:25px;float:left;}
    .preview-image-container{margin-left:120px;}
    .add_page,.confirm_page{border:1px solid #ececec;}

    #sort-list ul li {float:left;margin-left:10px;}
    #sort-list ul li span{display:block;width:30px;height:30px;line-height:30px;border:1px solid #ececec;text-align:center;cursor:pointer;}
    .sortCuur {background-color:#20ab4f;color:#fff;border:1px solid #20ab4f;}
    .isHave{background-color:#ececec;}
</style>
</head>
<include file="Public/common_header" />
<div class="mian">
    <include file="Public/sidebar"  menu="nrgl.jdtgl" />

    <div class="mianR">
        <div class="add_page">
            <h3 class="cha">添加焦点图</h3>
            <div class='carousel'>
                <!--            <form id="add_carousel" action='/Carousel/add_carousel_post' enctype='multipart/form-data' method='post'>-->
                <table width="100%">
                    <tr>
                        <td style="text-align:center">标题</td>
                        <td style="padding:5px 10px;">
                            <input type="text" name="title" placeholder="请输入标题" style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">
                        </td>
                    </tr>
                    <tr style="height:82px;">
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <div id="carousel_pic" style="display:none;">
                                <img src="">
                            </div>
                            <script type='text/javascript'>
                                new IFrameUploadImg(
                                        '浏览'
                                        , 'http://' + window.location.host + '/Carousel/uploadPic'
                                        , function (res) {
                                            var cdn_url = 'http:{$t|get_content_cdnurl}';
                                            if (res.code == 200) {
                                                var head_url = res.data[0];
                                                $('#carousel_pic').find('img').attr("src", cdn_url + head_url);
                                                $('#confirm_carousel_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q.jpg');
                                            }
                                        });
                            </script>
                            <!--<div id="imgdiv"><img id="imgShow" width="100" height="100" /></div>-->
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">类型</td>
                        <td style="padding:5px 10px;">
                            <input type="radio" name="type" value="2" class="type_item" checked>活动
                    <if condition="$platform eq 1">
                        <input type="radio" name="type" value="1" class="type_item">拍卖
                    </if>
                    <input type="radio" name="type" value="3" class="type_item">图片
                    </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">参数</td>
                        <td id="param_url" style="padding:5px 10px;">
                            <input type="text" name="param_url" placeholder="请输入以“http://”开头的活动URL" style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">
                        </td>
                        <td id="scene" style="display:none;padding:5px 10px;">
                            <select name="scene_id" id="scene_sign">
                                <volist  name="scene_list" id="sl">
                                    <option value="{$sl.scene_id}">{$sl.name}</option>
                                </volist>
                            </select>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align:center">是否登录</td>
                        <td id="param_auth" style="padding:5px 10px;">
                            <input type="radio" name="auth" value="1">是
                            <input type="radio" name="auth" value="2" checked >否
                        </td>
                    </tr>

                    <!--                    
                    <tr>
                        <td style="text-align:center">平台</td>
                        <td style="padding:5px 10px;">
                            <input type="radio" name="platform" value="1" class="type_item" checked>来拍车APP
                            <input type="radio" name="platform" value="2" class="type_item">车来车往APP
                            <input type="radio" name="platform" value="3" class="type_item">车来车往WEB
                        </td>
                    </tr>-->
                    <tr>
                        <td style="text-align:center">排序</td>
                        <td style="padding:5px 10px;" id="sort-list">
                            <ul>
                                <volist name="sort_position" id="sp">
                                    <if condition="$sp.is_have eq 1">
                                        <li><span sort-value="{$sp.position}" class="isHave">{$sp.position}</span></li>
                                        <else />
                                        <li><span sort-value="{$sp.position}">{$sp.position}</span></li>
                                    </if>
                                </volist>
                            </ul>
                            <em style="padding-left:20px;">灰色为已占用</em>
                            <!--<input type="text" name="sort"  value="" placeholder="请输入排序" style="width:100px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">-->
                        </td>
                    </tr>
                    <tr style="height:82px;">
                        <td width="10%" style="text-align:center">分享缩略图</td>
                        <td width="80%" style="padding:5px 10px;">
                            <div id="share_pic" style="display:none;">
                                <img src="">
                            </div>
                            <script type='text/javascript'>
                                var FrameUploadThumbImgComplete = null;
                                function IFrameUploadThumbImg(txt, upload_url, cb) {
                                    var r = Math.random().toString().split('.')[1];
                                    var id = 'upfrom' + r, input_id = 'file' + r, frm = 'frm' + r;

                                    var html = '<iframe src="" id="' + frm + '" name="' + frm + '" style="display:none;"></iframe><form id="' + id + '" action="' + upload_url + '?script_callback=parent.IFrameUploadThumbImgComplete"  method="POST" enctype="multipart/form-data" target="' + frm + '">\
                <input type="file" id="' + input_id + '" name="pic" class="shangChuan1" />\
                <input type="button" class="genghua" value="' + txt + '" />\
            </form>';
                                    document.write(html);
                                    this.input = $('#' + input_id);
                                    this.input.change(function (e) {
                                        IFrameUploadThumbImgComplete = function (data) {
                                            if (typeof(cb) != 'undefined')
                                                cb(data);
                                        };
                                        var fm = $('#' + id);
                                        fm.action += '&t' + Math.random();
                                        fm.submit();
                                    });
                                };

                                new IFrameUploadThumbImg(
                                    '浏览'
                                    , 'http://' + window.location.host + '/Carousel/uploadPic'
                                    , function (res) {
                                        var cdn_url = 'http:{$t|get_content_cdnurl}';
                                        if (res.code == 200) {
                                            var head_url = res.data[0];
                                            $('#share_pic').find('img').attr("src", cdn_url + head_url);
                                            $('#confirm_share_pic').attr('src', cdn_url + head_url + '@182w_82h_90Q');
                                        }
                                    });
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">分享内容</td>
                        <td style="padding:5px 10px;">
                            <input type="text" name="share_content" placeholder="请输入分享内容" style="width:300px;height:30px;line-height:30px;border:1px solid #ededee;padding-left:5px;">
                        </td>
                    </tr>
                </table>
                <div class='carousel_sub'>
                    <input type="hidden" value="{$platform}" name="platform">
                    <input type="button" value="确定" name="submit_carousel">
                    <input type="button" value="取消" name="cancel_carousel">
                </div>
            </div>
            <div class="yunBei" style="z-index:999998"></div>
        </div>
        <div class="confirm_page" style="display:none;">
            <h3 class="cha">确认焦点图</h3>
            <div class='carousel'>
                <table width="100%">
                    <tr>
                        <td style="text-align:center">标题</td>
                        <td style="padding:5px 10px;">
                            <div id="title"></div>
                        </td>
                    </tr>
                    <tr style="height:82px;" >
                        <td width="10%" style="text-align:center">图片</td>
                        <td width="80%" style="padding:5px 10px;">
                            <img id="confirm_carousel_pic" src="">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">类型</td>
                        <td>
                            <div id="type" style="padding:5px 10px;"></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">参数</td>
                        <td id="param" style="padding:5px 10px;"></td>
                    </tr>
                    <tr>
                        <td style="text-align:center">是否登录</td>
                        <td style="padding:5px 10px;">
                            <div id="auth"></div>
                        </td>
                    </tr>
                    <!--                    <tr>
                                            <td style="text-align:center">平台</td>
                                            <td id="platform" style="padding:5px 10px;"></td>
                                        </tr>-->
                    <tr>
                        <td style="text-align:center">排序</td>
                        <td style="padding:5px 10px;">
                            <div id="sort"></div>
                        </td>
                    </tr>
                    <tr style="height:82px;" >
                        <td width="10%" style="text-align:center">分享缩略图</td>
                        <td width="80%" style="padding:5px 10px;">
                            <img id="confirm_share_pic" src="">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:center">分享内容</td>
                        <td style="padding:5px 10px;">
                            <div id="share_content"></div>
                        </td>
                    </tr>
                </table>
                <div class='carousel_sub'>
                    <input type="button" value="确定" name="confirm_carousel">
                    <input type="button" value="取消" name="cancel_confirm_carousel">
                </div>
            </div>
            <div class="yunBei" style="z-index:999998"></div>
        </div>
    </div>
    <div class="clear"></div>
</div>

<script type="text/javascript">
    $("#sort-list li span").not('.isHave').eq(0).addClass('sortCuur');
    $("#sort-list li span").click(function () {
        if (!$(this).hasClass('isHave')) {
            $("#sort-list li span").removeClass("sortCuur");
            $(this).addClass("sortCuur");
        }
    });

    $('.type_item').change(function () {
        var selValue = $("input[name='type']:checked").val();
        if (selValue == 1) {
            $("#canshu").css({display: 'block'});
            $('#scene').css({display: 'block'});
            $('#param_url').css({display: 'none'});
        } else if (selValue == 2) {
            $("#canshu").css({display: 'block'});
            $('#scene').css({display: 'none'});
            $('#param_url').css({display: 'block'});
        } else if (selValue == 3) {
            $("#canshu").css({display: 'none'});
            $('#scene').css({display: 'none'});
            $('#param_url').css({display: 'none'});
        }
    });
    /**
     * 确定添加提交
     */
    $("input[name='submit_carousel']").click(function () {
        var title = $("input[name='title']").val();
        if(title == ''){
            shibai_alert("抱歉，请输入标题");
            return false;
        }
        $("#title").html(title);
        var focus_pic = $("#carousel_pic").find("img").attr("src");
        if (focus_pic == '') {
            shibai_alert("保存失败，未上传焦点图");
            return false;
        }
        var type = $("input[name='type']:checked").val();
        if (type == 1) {
            var scene_id = $("select[name='scene_id']").find("option:selected").val();
            if (scene_id == undefined) {
                shibai_alert("保存失败，未选择场次");
                return false;
            }
        } else if (type == 2) {
            var param_url_reg = /^(\w+:\/\/)?\w+(\.\w+)+.*$/;
            var param_url = $("input[name='param_url']").val();
            if (param_url == '') {
                shibai_alert("保存失败，未填写活动链接");
                return false;
            }
            if (!param_url_reg.test(param_url)) {
                shibai_alert("保存失败，输入URL参数格式不正确");
                return false;
            }
        }
        if (type == 1) {
            $("#type").html("拍卖");
            $("#param").html("<div id='scene_id'>" + scene_id + "</div>");
        } else if (type == 2) {
            $("#type").html("活动");
            $("#param").html("<div id='param_url_confirm'>" + param_url + "</div>");
        } else if (type == 3) {
            $("#type").html("图片");
        }

        $("#type").attr("type-id", type);

        var auth = $("input[name='auth']:checked").val();
        if(auth == 1){
            $("#auth").html("是");
        }else{
            $("#auth").html("否");
        }
        var sort_reg = /^[0-9]*[1-9][0-9]*$/;
        var sort = $(".sortCuur").attr("sort-value");
        if (sort == '') {
            shibai_alert("保存失败，未填写排序");
            return false;
        }
        if (!sort_reg.test(sort)) {
            shibai_alert("保存失败，只能输入正整数");
            return false;
        }
        var platform = $("input[name='platform']").val();
        if (platform == 1) {
            $("#platform").html("来拍车APP");
        } else if (platform == 2) {
            $("#platform").html("车来车往APP");
        } else if (platform == 3) {
            $("#platform").html("车来车往WEB");
        }
        var share_pic = $("#share_pic").find("img").attr("src");
        if (share_pic == '') {
            shibai_alert("抱歉，未上传分享缩略图");
            return false;
        }
        var share_content = $("input[name='share_content']").val();
        if(share_content == ''){
            shibai_alert("抱歉，请输入分享内容");
            return false;
        }
        $("#share_content").html(share_content);
        $.post("/Carousel/isSortExist", {"sort": sort, "platform": platform}, function (data) {
            if (data.count > 0) {
                shibai_alert("排序位置已被占用，请重新填写");
                return false;
            }
            $("#sort").html(sort);
            $(".add_page").hide();
            $(".confirm_page").show();
        }, 'json');
    });
    /**
     * 取消添加
     */
    $("input[name='cancel_carousel']").click(function () {
//        window.location.href = "/Carousel/index";
        window.history.back();
    });
    /**
     * 确定添加
     */
    $("input[name='confirm_carousel']").click(function () {
        var title = $("#title").html();
        var focus_pic = $("#carousel_pic").find("img").attr('src');
        var type = $("#type").attr('type-id');
        var auth =$("input[name='auth']:checked").val();
        if (type == 1) {
           var  scene_id = $("#scene_id").html();
        } else {
           var param_url = $("#param_url_confirm").text();
        }
        var sort = $("#sort").html();
        var platform = $("input[name='platform']").val();
        var share_picture = $("#share_pic").find("img").attr('src');
        var share_content = $("#share_content").html();
        if (type == 1) {
            var params = {
                "title": title,
                "focus_picture": focus_pic,
                "type": type,
                "auth": auth,
                "scene_id": scene_id,
                "platform": platform,
                "sort": sort,
                "share_picture": share_picture,
                "share_content": share_content
            };
        } else if (type == 2) {
            var params = {
                "title": title,
                "focus_picture": focus_pic,
                "type": type,
                "auth": auth,
                "param_url": param_url,
                "platform": platform,
                "sort": sort,
                "share_picture": share_picture,
                "share_content": share_content
            };
        } else if (type == 3) {
            var params = {
                "title": title,
                "focus_picture": focus_pic,
                "type": type,
                "auth": auth,
                "platform": platform,
                "sort": sort,
                "share_picture": share_picture,
                "share_content": share_content
            };
        }
        $.post("/Carousel/addCarouselData", params, function (res) {
            if (res.code == 200) {
                btn_alert(res.msg);
                setTimeout(function () {
                    window.location.href = "/Carousel/index";
                }, 2000);
            } else {
                shibai_alert(res.msg);
            }
        }, 'json');
    });
    /**
     * 确定界面取消
     */
    $("input[name='cancel_confirm_carousel']").click(function () {
        $(".confirm_page").hide();
        $(".add_page").show();
    });

    $(function () {
        $(".shangChuan").premage({
            default_image: '{$t|get_style_cdnurl}paimai/cheshan/images/logo.png',
            width: '182px',
            height: '82px'
        });
        $(".shangChuan1").premage({
            default_image: "{$t|get_style_cdnurl}paimai/cheshan/images/logo.png",
            width: '82px',
            height: '82px'
        });
    })
</script>

<include file="Public/foot" />
